import React, { Component } from 'react';

export default class Inquiry extends Component{
    constructor(props){
        super(props);   
        this.state={
            flag:1,
        }
    }

    
    f1 = ()=>{
        alert("巧了，我也很喜欢我自己！！！") 
    } 

    move = ()=>{ 
        var Bn = document.getElementById('Bn');
        var aWidth= (document.body.clientWidth || document.documentElement.clientWidth)-200;
        var aHeight= (document.body.clientHeight || document.documentElement.clientHeight)-60;
        var sJs1=Math.floor(Math.random()*aHeight);
        var sJs2=Math.floor(Math.random()*aWidth);
        if(this.state.flag===1){
          Bn.style.top=sJs1 + 'px';
          Bn.style.left=sJs2+'px'; 
          this.setState({
            flag:2
          });
      
        }else if(this.state.flag===2){
          Bn.style.top=sJs1+'px';
          Bn.style.left=sJs2+'px';
          this.setState({
            flag:3
          });
        }else if(this.state.flag===3){
          Bn.style.top=100 + 'px';
          Bn.style.left=286 + 'px';
          this.setState({
            flag:4
          });
        }else if(this.state.flag===4){
          Bn.style.top=100 + 'px';
          Bn.style.left=360 + 'px';
          this.setState({
            flag:1
          });
        }
    }

    f2 = ()=>{
        alert('哇！ 你怎么知道我小名叫“个锤子”！');
    }

    render(){
        return(
            <div>
                <h1 style= {{color :"white"}}>你喜欢我吗
            
                </h1>
                <div style={{position:"absolute",left:"285px",top:"235px"}}> 
                    <input type="button" style={{color:"black"}} value=" 是的！ " onClick={this.f1}/>
                </div>
                <div id="Bn" style={{position:"absolute",left:"500px",top:"235px"}}> 
                    <input type="button" style={{color:"black"}} value=" 喜欢个锤子！ " onMouseOver={this.move} onClick={this.f2}/>
                </div>
            </div> 
        )
    }
}